<template>
  <div class="form_bar">
    <el-form label-position="left" label-width="auto" ref="ruleFormRefClues" :rules="rules" :model="formData"
      class="searchForm">
      <el-row :gutter="20">
        <!-- 线索信息 -->
        <el-col :span="8">
          <el-form-item label="线索信息">
            <el-input v-model="formData.mobile_or_name" placeholder="请输入线索信息"> </el-input>
          </el-form-item>
        </el-col>
        <!-- 线索类型 -->
        <el-col :span="8">
          <el-form-item label="线索类型">
            <!-- <el-select v-model="formData.clue_type" placeholder="全部"> -->
            <el-select v-model="formData.type" placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 归属员工 -->
        <el-col :span="8">
          <el-form-item label="归属员工">
            <el-select popper-class="zw-hide_select_option" :popper-append-to-body="false" v-model="formData.work_user_ids"
              multiple placeholder="请选择员工" @click="openDepart" @change="changeDepart">
              <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 线索公海 -->
        <el-col :span="8">
          <el-form-item label="线索公海">
            <el-select v-model="formData.clue_sea" multiple>
              <el-option v-for="item in sea_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 线索等级 -->
        <el-col :span="8">
          <el-form-item label="线索等级">
            <el-select v-model="formData.clue_level" placeholder="全部">
              <el-option label="全部" :value="0"></el-option>
              <el-option v-for="item in clue_level_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 创建时间 -->
        <el-col :span="8">
          <el-form-item label="创建时间">
            <el-date-picker 
              v-model="formData.create_time" 
              type="daterange" 
              range-separator="-"
              :defaultTime="defaultTime()"
              :editable="false"
              format="YYYY-MM-DD HH:mm:ss" 
              value-format="YYYY-MM-DD HH:mm:ss" 
              start-placeholder="开始时间" 
              end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row justify="end">
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRefClues)">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted } from 'vue'
import type { ElForm, FormInstance, FormRules } from 'element-plus'
import ZWDepart from '@/components/ZWDepart.vue'
import { cluesLevelList } from '@/api/customerCenter/labellagroup'
// import { seaList } from '@/api/customerCenter/customerSea'
import { seaList } from '@/api/customer/clubManage/commonSea'

import { getSetionId, defaultTime } from '@/utils/utils'
// const emit = defineEmits(['submit'])
const DepartRef = ref(null)
const creators = reactive([])
const type_list = reactive([
  {
    id: 1,
    name: '个人线索'
  },
  {
    id: 2,
    name: '企业线索'
  }
])

type Props = {
  modelValue: boolean,
  default_sea?: number,
  params?: {}
}
const props = defineProps<Props>()
const emit = defineEmits(['submit', 'update:modelValue', 'update:default_sea', 'update:params'])
const updateVisible = (flag: boolean): void => {
  emit('update:modelValue', flag)
}
const updateDefaultSea = (default_sea: number): void => {
  emit('update:default_sea', default_sea)
}
updateVisible(false)

const clue_level_list = reactive([])
const sea_list = reactive([])
const formData = reactive({
  mobile_or_name: '',
  // clue_type: 0,
  type: 0,
  work_user_ids: [],
  clue_sea: [],
  clue_level: 0,
  create_time: [],
})

const updateParams = (params: any): void => {
  emit('update:params', params)
}
updateParams(formData)

const ruleFormRefClues = ref<FormInstance>()
const rules = reactive<FormRules>({
  clue_sea: [
    {
      required: true,
      message: '请至少选择一个公海',
      trigger: 'change',
    },
  ],
})


//打开新建选择人
const openDepart = () => {
  DepartRef.value.multiple = false
  DepartRef.value.departVisble = true
  DepartRef.value.selectedMember = creators
}
// 获取部门成员
const getDepart = (res: any) => {
  creators.splice(0)
  creators.push(...res)
  formData.work_user_ids = getSetionId('id', res)
  DepartRef.value.departVisble = false
}
const changeDepart = (data: any) => {
  let removeDepart = creators.find((item: any) => !data.includes(item.id))
  let arr: any[] = creators.filter((item: any) => data.includes(item.id))
  formData.work_user_ids = getSetionId('id', arr)
  creators.splice(0)
  creators.push(...arr)
  DepartRef.value.removeItem(removeDepart)
}

const submitForm = async (formEl: FormInstance | undefined, isClear?: any) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      emit('submit', formData, isClear)
    } else {
      console.log('error submit!', fields)
    }
  })
}

//重置
const resetForm = async () => {
  formData.mobile_or_name = ''
  // formData.clue_type = 0
  formData.type = 0
  formData.clue_level = 0
  formData.work_user_ids.splice(0)
  formData.clue_sea.splice(0)
  formData.clue_sea.push(sea_list[0].id)
  formData.create_time.splice(0)
  creators.splice(0)
  await submitForm(ruleFormRefClues.value, true)
}
onMounted(() => {
  cluesLevelList({
    status: 1
  }).then((res: any) => {
    const { data } = res
    clue_level_list.splice(0)
    clue_level_list.push(...data)
  })
  seaList({
    page: 1, page_size: 1000, name: ''
  }).then((res: any) => {
    const { data } = res
    sea_list.splice(0)
    sea_list.push(...data)
    formData.clue_sea.push(data[0].id)
    updateDefaultSea(data[0].id)
    updateVisible(true)
  })
})

watch(()=>formData, (val)=>{
  updateParams(formData)
},{deep:true,immediate:true})
</script>

<style lang="scss" scoped>
:deep .el-form-item__content {
  display: flex;
}

.form_bar {
  background: #f9f9f9;
  display: flex;
  align-items: center;
  border: 1px solid #eae7e7;
  :deep .el-input__inner{
    width: 230px;
  }
  .searchForm {
    :deep .el-form-item {
      margin: 5px;
    }
    :deep(.el-date-editor.el-input__wrapper) {
      width: auto;
    }
  }
}

:deep .el-select__popper.el-popper[role='tooltip'] {
  display: none;
}
</style>
